<script setup>
//导入pinia用户数据
import { ref } from "vue";
import {userInfoStore}from "../stores/UserInfoPinaStores";
import { RouterLink} from "vue-router";
let user= ref(userInfoStore());



</script>

<template>

    <div class="userC">
        <div class="userTitle">
            <h1>用户信息页</h1>
            <br><br>
            <h3>欢迎<span v-text="user.getUserName"></span>到来</h3>
        </div>
        <div class="userList">
            
            <div><RouterLink to="/userInfo" class="RaLink">个人信息页</RouterLink></div>
            <div><RouterLink to="/userInfoAlter" class="RaLink">修改个人信息</RouterLink></div>
            <div><RouterLink to="/userInfoPwd" class="RaLink">修改密码</RouterLink></div>
            
        </div>
        <div class="userContent">
            <RouterView name="UserInfoS"></RouterView>  
        </div>
    </div>
</template>

<style scoped>
    .userC{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 255, 255,1);
        background-image: url(../public/img/lo_bg.jpg);

        
    }
    .userTitle{
        width: 100%;
        height: 20%;
        background-color: rgb(224, 220, 214);
        
    }
    .userList{
        width: 20%;
        height: 80%;
        background-color: rgb(232, 235, 227);
        float: left;
    }
    .userContent{
        width: 80%;
        height: 80%;
        background-color: blue;
        float: right;

    }
    .RaLink{    
        text-decoration: none;
        color: rgb(90, 85, 38);
    }
    .userList div{
        width: 100%;
        height: 10%;
        text-align: center;
        line-height: 4;
        background-color: burlywood;
        border: 1px solid black;
    }
    .userList div:hover{
        background-color:rgb(110, 226, 106);
    }
    .userList div:active{
        background-color:rgb(245, 75, 8);
    }
</style>
